<template>
    <div>
        <div class="goods">
      <div class="goods-center">
        <div class="goods-box">
          <div class="goods-top">
            <div class="goods-left" v-if="image">
              <div  v-for="(item,index) in image[0].label" :key="index">
                <img v-show="now==index"
                    :src="`http://localhost:3000/${item.sm_img}`" />
              </div>
              
            </div>
            <div class="goods-right">
              <a href="">
                <img 
                  src="../assets/img/goods/f067fed33e5707a4c248ec119636efb7.jpg"
                  alt=""
                />
              </a>
              <div class="banner-img" v-if="image">
                 <div @mouseover="now=index"  :class="{acitve:now==index}" v-for="(item,index) in image[0].label" :key="index">
                  <img
                    :src="`http://localhost:3000/${item.sm_img}`"
                    alt=""
                  />
                </div>
              
              </div>
            </div>
          </div>
          <div class="center-box">
            <div class="center-cont" v-if="data">
              <div class="center-left">
                <h2>{{data[0].name}}</h2>
                <div class="label">
                  <a href="">新品></a>
                  <a href="">生日></a>
                </div>
                <ul class="details">
                  <li>
                    <img src="../assets/img/goods/pcicon-33.png" alt="" />
                    <span>奶油</span>
                  </li>
                  <li>
                    <img
                      src="../assets/img/goods/cc59aab3ee5745dfdb138c2bf3c6929d.png"
                      alt=""
                    />
                    <span>茉莉花</span>
                  </li>
                  <li>
                    <img
                      src="../assets/img/goods/8a130cdf3c2b65897609b1557628a6b2.png"
                      alt=""
                    />
                    <span>蜜瓜</span>
                  </li>
                </ul>
                <div class="text" v-html="data[0].brief">
                 
                </div>
                <div class="detial-dis">
                  <div class="detial-exist">
                    <i></i>
                    <span>保鲜条件:</span>
                    <span>10℃以下保存</span>
                  </div>
                  <div class="detial-sweet">
                    <i></i>
                    <span>参考条件:</span>
                    <span class="sweet-icon">
                      <i></i>
                      <i></i>
                      <i></i>
                      <i></i>
                      <i></i>
                    </span>
                  </div>
                </div>
              </div>
              <div class="center-right">
                <div class="center-specif">
                  <div class="price">
                    <span>¥</span>
                    <span>{{price[active]}}</span>
                    <span>/{{weight[active]}}({{spec[active]}})</span>
                  </div>
                  <ul class="options">
                    <li>
                      <i></i>
                      <span >{{size[active]}}</span>
                    </li>
                    <li>
                      <i></i>
                      <span>{{umber[active]}}</span>
                    </li>
                    <li>
                      <i></i>
                      <span>{{laid[active]}}</span>
                    </li>
                    <li>
                      <i></i>
                      <span>预计明天 09:30配送</span>
                    </li>
                  </ul>
                  <div class="detail-size">
                    <span>商品规格</span>
                    <ul class="detail-option">
                      <li @click="active=0" :class="{active1:active==0}">
                        <span>{{weight[0]}} ({{spec[0]}})
                        </span>                   
                        <i></i>
                      </li>
                      <li @click="active=1" :class="{active1:active==1}">
                        <span>{{weight[1]}} ({{spec[1]}})</span>
                        <i></i>
                      </li>
                      <li @click="active=2" :class="{active1:active==2}">
                        <span>{{weight[2]}} ({{spec[2]}})</span>
                        <i></i>
                      </li>
                      <li @click="active=3" :class="{active1:active==3}">
                        <span>{{weight[3]}} ({{spec[3]}})</span>
                        <i></i>
                      </li>
                    </ul>
                  </div>
                  <div class="detail-btn">
                    <router-link to="/cart">
                    <span class="btn1">立即购买</span>
                    </router-link>
                    <router-link to="/cart">
                    <span class="btn2">加入购物车</span>
                    </router-link>
                    
                  </div>
                </div>
              </div>
            </div>

            <div class="center-img" v-html="image.lg_img">
             {{image.lg_img}}
            </div>
            <div class="center-text">
              <p>退改说明：</p>
              <p>
                1.蛋糕为定制产品，全国八地距离配送时间超12小时及以上订单可修改、取消、退订；距离配送时间不足12小时不再支持修改、取消、退订。（22点之后不接受次日17：30之前配送订单修改、退订）一旦生产无法退订。
              </p>
              <p>
                2.若您需要修改退单，请提前24小时联系人工在线客服。恕不接受留言告知（客服工作时间8：00-22：00）
              </p>
              <p>3.疫情等不可抗力因素/季节性/节日性产品，对于部分特殊产品可能会出现预定后没有相应原材料等情况，我们的工作人员将会与收货人或订购人联系协商是否换其他同等价值的产品。</p>
            </div>
            <div class="recommed">
                <span>商品推荐</span>
                <ul class="recommed-list">
                    <li @mouseenter="onMouseIn(1)"
                @mouseleave="onMouseOut()">
                        <a href="">
                        <img src="../assets/img/goods/784496196c211a6237c4cdc3fbbd516a.jpg" alt="">
                        <span>北海道吐司（4片）</span>
                        <span>￥13.80/150g(份)</span> 
                        </a>
                        <div class="revommed-cart" v-show="seen && 1 == current">
                            <a href="">
                            <span>乳脂奶油</span>
                            </a>
                            <span class="cart-icon">
                                <i></i>
                            </span>
                        </div>
                    </li>
                    <li @mouseenter="onMouseIn(2)"
                @mouseleave="onMouseOut()">
                        <a href="">
                          <img src="../assets/img/goods/aba4aa6c64ea84f45289ad9d04b2d5cf.png" alt="">
                        <span>阳光葡萄卷</span>
                        <span>￥13.80/70g(份)</span>  
                        </a>
                        <div class="revommed-cart" v-show="seen && 2 == current">
                            <a href="">
                            <span></span>
                            </a>
                            <span class="cart-icon">
                                <i></i>
                            </span>
                        </div>
                    </li>
                    <li @mouseenter="onMouseIn(3)"
                @mouseleave="onMouseOut()">
                        <a href="">
                           <img src="../assets/img/goods/da945269503db7ff8ce9792cf89fbc51.png" alt="">
                        <span>家常面包套餐</span>
                        <span>￥41.40/265g(一份)</span>  
                        </a>
                        <div class="revommed-cart">
                            <a href="">
                            <span></span>
                            </a>
                            <span class="cart-icon" v-show="seen && 3 == current">
                                <i></i>
                            </span>
                        </div>
                    </li>
                    <li @mouseenter="onMouseIn(4)"
                @mouseleave="onMouseOut()">
                        <a href="">
                        <img src="../assets/img/goods/bcddb61e45426309479925d4e694f66e.jpg" alt="">
                        <span>布莱克</span>
                        <span>￥198.00/454g(1.0磅)</span>  
                        </a>
                        <div class="revommed-cart" v-show="seen && 4 == current">
                            <a href="">
                            <span>烤榛子和榛子酱,黑巧克力</span>
                            </a>
                            <span class="cart-icon">
                                <i></i>
                            </span>
                        </div>
                    </li>
                    <li @mouseenter="onMouseIn(5)"
                @mouseleave="onMouseOut()">
                        <a href="">
                        <img src="../assets/img/goods/c28932d6886994d259828091a579f744.jpg" alt="">
                        <span>朗姆芝士</span>
                        <span>￥298.00/908g(2.0磅)</span>  
                        </a>
                        <div class="revommed-cart" v-show="seen && 5 == current">
                            <a href="">
                            <span>白朗姆酒,柠檬,芝士</span>
                            </a>
                            <span class="cart-icon">
                                <i></i>
                            </span>
                        </div>
                    </li>
                </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    </div>
</template>

<script>
    export default {
        data() {
          return {
            now: 0,
            seen:false,
            current:0,
            data:'',
            image:'',
            active:0,
            item:0,
            price:['268.00','398.00','598.00','958.00'],
            weight:['454g','908g','1362g','2270g'],
            spec:['1.0磅','2.0磅','3.0磅','5.0磅'],
            size:['约13x13cm','约16x16cm','约17x17cm','约23x23cm'],
            umber:['适合3-4人分享','适合5-6人分享','适合7-8人分享','适合11-12人分享'],
            laid:['含5套餐具（蜡烛生日帽需单独订购）','含5套餐具（蜡烛生日帽需单独订购）','含10套餐具（蜡烛生日帽需单独订购）','含15套餐具（蜡烛生日帽需单独订购）']

          }
        },
        methods: {
    onMouseIn(i) {
      //console.log(i, "进入");
      this.seen = true; //鼠标移入显示
      this.current = i;
      console.log(i);
    },
    onMouseOut(i) {
      //console.log("退出");
      this.seen = false; //鼠标移出隐藏
      this.current = 0;
    },
  },
  computed: {
    // 把详情数据中的src 路径补全
  /*full_details() {
      // src="img
      // src="https://web.codeboy.com/xuezi/img
      return this.image.image.sm_img.replace(

        `src="https://localhost:3000/`
      )}*/
  },
        mounted () {
         // console.log(this.$route.query.gid);
          let url = `/pro/goods?gid=${this.$route.query.gid}`
          this.axios.get(url).then(res=>{
            console.log(res);
            this.data = res.data.data
          })
          let urls = `/pro/img?gsid=${this.$route.query.gid}`
          this.axios.get(urls).then(res=>{
           
            console.log(res);
         res.data.data.lg_img = res.data.data[0].lg_img.replace(/src="img/g,`src="${'http://localhost:3000/'}img`)
            this.image = res.data.data
           // console.log(this.image);
          })
        },
    }
</script>

<style scoped src="../assets/css/goods.css">
</style>
<style lang="scss" scoped>

</style>